<template>
	<view class="index">
		<view class="index-header" @click="handleSearch">
			<image src="../../static/images/icon/search.png"></image>
			<text>搜索</text>
		</view>
		<view class="index-swiper">
			<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper"
				indicator-color="#d1e5fb" indicator-active-color="#1b7dec">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="handBanner(item)">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="index-nav">
			<view class="nav-box" @click="handleXptj">
				<image src="../../static/images/icon/newProd.png"></image>
				<view>
					新品推荐
				</view>
			</view>
			<view class="nav-box" @click="handleXsth">
				<image src="../../static/images/icon/timePrice.png"></image>
				<view>
					限时特惠
				</view>
			</view>
			<view class="nav-box" @click="handleMrfq">
				<image src="../../static/images/icon/neweveryday.png"></image>
				<view>
					每日疯抢
				</view>
			</view>
			<view class="nav-box" @click="handleLyhj">
				<image src="../../static/images/icon/newprods.png"></image>
				<view>
					领优惠券
				</view>
			</view>
		</view>
		<view class="index-main">
			<view class="main-title">
				每日上新
			</view>
			<view class="main-con-1">
				<view class="main-con-box" v-for="(item,index) in records" :key="index">
					<image :src="item.pic" @click="handBan(item)"></image>
					<view class="main-con-box-right">
						<view class="right-title">
							{{item.prodName}}
						</view>
						<view class="right-p">
							{{item.brief}}
						</view>
						<view class="rihgt-foot">
							<view class="right-foot-l">
								￥{{item.price}} <text>.00</text>
							</view>
							<view class="right-foot-r">
								<image src="../../static/images/tabbar/basket-sel.png" class="image"
									@click="handleAddGw(item.prodId)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-title">
				商城热卖
				<text>更多 ></text>
			</view>
			<view class="main-con-2">
				<view class="main-con-box" v-for="(item,index) in recordsSprm" :key="index">
					<image :src="item.pic" @click="handBan(item)"></image>
					<view class="main-con-box-title">
						{{item.prodName}}
					</view>
					<view class="main-con-box-p">
						{{item.brief}}
					</view>
					<view class="rihgt-foot">
						<view class="right-foot-l">
							￥{{item.price}} <text>.00</text>
						</view>
						<view class="right-foot-r">
							<image src="../../static/images/tabbar/basket-sel.png" class="image" @click="handleAddGw(item.prodId)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="main-title">
				更多宝贝
			</view>
			<view class="main-con-1">
				<view class="main-con-box" v-for="(item,index) in recordsGdbb" :key="index">
					<image :src="item.pic" @click="handBan(item)"></image>
					<view class="main-con-box-right">
						<view class="right-title">
							{{item.prodName}}
						</view>
						<view class="right-p">
							{{item.brief}}
						</view>
						<view class="rihgt-foot">
							<view class="right-foot-l">
								￥{{item.price}} <text>.00</text>
							</view>
							<view class="right-foot-r">
								<image src="../../static/images/tabbar/basket-sel.png" class="image" @click="handleAddGw(item.prodId)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-foot">
				<view class="bj"></view>
				<view class="main-title">
					测试
					<text>查看更多</text>
				</view>
				<view class="main-foot-bigBox">
					<view class="main-foot-box" v-for="(item,index) in recordscs" :key="index" @click="handBan(item)">
						<image :src="item.pic"></image>
						<view class="main-foot-title">
							{{item.prodName}}
						</view>
						<view class="rihgt-foot">
							<view class="right-foot-l">
								￥{{item.price}} <text>.00</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				swiperList: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				records: [],
				recordsSprm: [],
				recordsGdbb: [],
				recordscs: [],
				sts: null,

			};
		},
		onLoad() {
			// this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可

			// 调用每日上新
			http.request({
				url: "/prod/prodListByTagId",
				method: "get",
				data: {
					tagId: 1,
					size: 6
				},
				callBack: res => {
					this.records = res.records
					// console.log(this.records, "111");
				}
			});
			// 调用商城热销
			http.request({
				url: "/prod/prodListByTagId",
				method: "get",
				data: {
					tagId: 2,
					size: 6
				},
				callBack: res => {
					this.recordsSprm = res.records
					// console.log(this.records, "111");
				}
			});
			// 调用更多宝贝
			http.request({
				url: "/prod/prodListByTagId",
				method: "get",
				data: {
					tagId: 3,
					size: 6
				},
				callBack: res => {
					this.recordsGdbb = res.records
					// console.log(this.records, "111");
				}
			});
			// 调用测试
			http.request({
				url: "/prod/prodListByTagId",
				method: "get",
				data: {
					tagId: 7,
					size: 6
				},
				callBack: res => {
					this.recordscs = res.records
					// console.log(this.records, "111");
				}
			});
			// 调用轮播图
			http.request({
				url: "/indexImgs",
				method: "get",
				data: {},
				callBack: res => {
					this.swiperList = res
					// console.log(this.swiperList, "232431");
				}
			})
		},
		methods: {
			// 搜索
			handleSearch(){
				uni.navigateTo({
					url: `/pages/search-page/search-page`
				})
			},
			// 刷新购物车
			handleNewGw() {
				http.getCartCount()
			},
			// 添加购物车
			handleAddGw(row) {
				http.request({
					url: "/prod/prodInfo",
					method: "get",
					data: {
						prodId: row
					},
					callBack: res => {
						console.log(res);
						http.request({
							url: "/p/shopCart/changeItem",
							method: "post",
							data: {
								basketId: 0,
								count: 1,
								prodId: res.prodId,
								shopId: res.shopId,
								skuId: res.skuList[0].skuId,
							},
							callBack: res => {
								uni.showToast({
									title: "加入购物车成功",
									icon: "none"
								})
								this.handleNewGw()
							}
						})
					}
				})
			},
			// 轮播图跳转
			handBanner(row) {
				// console.log(row.relation);
				if (row.relation) {
					uni.navigateTo({
						url: `/pages/prod/prod?prodid=${row.relation}`
					})
				}
			},
			// 每日上新，商城热销···
			handBan(row) {
				console.log(row);
				if (row.prodId) {
					uni.navigateTo({
						url: `/pages/prod/prod?prodid=${row.prodId}`
					})
				}
			},
			// 新品推荐
			handleXptj() {
				const sts = 1
				uni.navigateTo({
					url: `/pages/prod-classify/prod-classify?sts=${sts}`
				})
			},
			// 限时特惠
			handleXsth() {
				const sts = 1
				uni.navigateTo({
					url: `/pages/prod-classify/prod-classify?sts=${sts}`
				})
			},
			// 每日疯抢
			handleMrfq() {
				const sts = 3
				uni.navigateTo({
					url: `/pages/prod-classify/prod-classify?sts=${sts}`
				})
			},
			// ···轮播图开始
			DotStyle(e) {
				// this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				// this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				// let list = this[name];
				// for (let i = 0; i < list.length; i++) {
				// 	list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
				// 	list[i].mLeft = i - parseInt(list.length / 2)
				// }
				// this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				// this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				// this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			// ···轮播图结束
			// 
		}
	}
</script>
<style lang="scss" scoped>
	.index::v-deep {
		.index-header {
			text-align: center;
			height: 30px;
			line-height: 30px;
			padding: 10px 0;

			image {
				width: 16px;
				height: 16px;
				margin-right: 5px;
			}

			text {
				font-size: 12px;
				color: #999;
			}
		}
		// 轮播图开始
		.swiper-item {
			box-shadow: 0 4px 10px 0 rgba(83, 83, 83, .288);
		}

		uni-swiper[class*="-dot"] .uni-swiper-dots {
			position: relative;
			top: 174px;
		}

		uni-swiper.round-dot .uni-swiper-dot {
			width: 8px;
			height: 8px;
			// background: #d1e5fb !important;
		}

		uni-swiper.round-dot .uni-swiper-dot-active {
			// background: #1b7dec !important;
		}

		uni-swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
			width: unset;
			height: unset;
			top: 100px;
		}

		.card-swiper uni-swiper-item {
			padding-bottom: 6px;
		}

		// 轮播图结束
		// 导航开始
		.index-nav {
			display: flex;
			justify-content: space-between;
			cursor: pointer;

			.nav-box {
				width: 25%;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;
				font-size: 12px;

				image {
					width: 37px;
					height: 37px;
					margin-bottom: 10upx;
				}
			}
		}

		// 导航结束
		// 每日上新开始
		.index-main {
			padding: 10px;
			margin-top: 20px;

			.main-title {
				height: 60px;
				line-height: 60px;
				font-size: 16px;
				display: flex;
				justify-content: space-between;
			}

			.main-con-1 {
				.main-con-box {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10upx;
					padding: 10px;

					image {
						width: 125px;
						height: 125px;
						margin-right: 10px;
					}

					.main-con-box-right {
						width: 72%;

						.right-title {
							margin-bottom: 10px;
						}

						.right-p {
							font-size: 12px;
							color: #999;
							margin-bottom: 20px;
						}


					}
				}
			}

			.rihgt-foot {
				color: #f00;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 12px;
				}

				.right-foot-r {
					.image {
						width: 24px;
						height: 24px;
					}
				}
			}

			.main-con-2 {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: flex-end;

				.main-con-box {
					width: 48%;
					margin-bottom: 10px;
					box-shadow: 0px 3px 4px rgba(58, 134, 185, .2);
					padding-bottom: 10px;

					image {
						width: 170px;
						height: 170px;
					}

					.main-con-box-title {
						/* 文本不换行 */
						white-space: nowrap;
						/* 超出隐藏 */
						overflow: hidden;
						/* 显示省略号 */
						text-overflow: ellipsis;
						margin-top: 10px;
						font-size: 16px;
					}

					.main-con-box-p {
						font-size: 14px;
						color: #999;
						margin-bottom: 20px;
					}

				}
			}

			.main-foot {
				position: relative;

				.bj {
					position: absolute;
					top: 0px;
					width: 100%;
					height: 160px;
					z-index: -1;
					background-color: #3e99d7;
				}

				.main-title {
					color: #fff;
					padding: 0 10px;

					text {
						font-size: 12px;

						span {
							padding: 10upx 10px;
							background-color: #65addf;
							border-radius: 10px;
						}
					}
				}

				.main-foot-bigBox {
					padding: 0 10px;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.main-foot-box {
						width: 32%;
						margin-bottom: 10px;
						box-shadow: 0px 3px 4px rgba(58, 134, 185, .2);

						image {
							width: 110px;
							height: 100px;
						}

						.main-foot-title {
							height: 38px;
							/* 你要显示几行 */
							-webkit-line-clamp: 2;
							/* 超出隐藏 */
							overflow: hidden;
							/* 显示省略号 */
							text-overflow: ellipsis;
							/* 自动伸缩你设置的行数的高度 */
							display: -webkit-box;
							/* 设置这个盒子的排列方式 */
							-webkit-box-orient: vertical;
						}
					}
				}
			}

		}

		// 每日上新结束
	}
</style>